{extend name='common/common' /}

{block name="style"}
<link href="__CSS__/bootstrap.min.css?v=3.3.6" rel="stylesheet">
{/block}

{block name="content"}
<el-row>
<el-col :lg="20">
<el-card class="box-card">
	<div slot="header">
		<span class="span-primary"><i class="el-icon-edit-outline"></i></span>
		<span class="span-warning">{$Company.name}</span>
		网店填报
		<el-button class="header-btn" type="info" size="small"
			icon="el-icon-back" plain @click="history.back(-1)"> 企业列表</el-button>
	</div>
	<div class="el-card-content">
		<el-form :model="form" ref="form_ref" inline>
			<table class="table table-bordered table-striped text-center">
				<tbody>
					<tr>
						<td class="text-center">填表人</td>
						<td>
							<el-input v-model="form.link_man" size="mini"></el-input>
						</td>
						<td class="text-center">联系电话</td>
						<td>
							<el-input v-model="form.link_type" size="mini"></el-input>
						</td>
						<td class="text-center">报表日期</td>
						<td>
							<el-date-picker size="mini" type="month"
								v-model="form.rpt_date" value-format="timestamp">
							</el-date-picker>
						</td>
					</tr>
					<tr>
						<th width="100" class="text-center">序号</th>
						<th class="text-center">网店名称</th>
						<th class="text-center">网店网址</th>
						<th class="text-center">网店简介</th>
						<th width="150" class="text-center">上架产品数量（个）</th>
						<th class="text-center">月销售额（元）</th>
					</tr>
					<tr v-for="(v, index) in form.content">
						<td>{{index + 1}}</td>
						<td>{{v.webshop_name}}</td>
						<td>{{v.webshop_url}}</td>
						<td>{{v.webshop_remark}}</td>
						<td>
							<el-input size="mini" v-model="v.pro_num"
								type="number" min="0">
							</el-input>
						</td>
						<td>
							<el-input size="mini" v-model="v.sales_amount"
								type="number" min="0">
							</el-input>
						</td>
					</tr>
				</tbody>
			</table>
			<p class="text-center">
				<el-button type="primary" plain @click="saveTable">保存表格</el-button>
			</p>
		</el-form>
	</div>
</el-card>
</el-col>
</el-row>
{/block}

{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:{
		loading:false,
		form:{
			depart_id:"{$Company.depart_id}",
			depart_name:"{$Company.depart_name}",
			company_id:"{$Company.id}",
			create_uid:"{$Company.uid}",
			link_man:"",link_type:"",rpt_date:"",
			content:[{
				webshop_name:"",webshop_url:"",webshop_remark:"",
				pro_num:"",sales_amount:""
			}]
		},
	},
	mounted:function() {
		this.getForm();
	},
	methods:{
		getForm() {
			$.post('{:url("Commit/getWebshopForm")}',{
				company_id:"{$Company.id}"
			},function(res) {
				if(res.code == 1){
					main.form.content = res.data;
				}else{
					main.$notify.error({title:"错误",message:res.msg});
				}
			});
		},
		saveTable() {
			if(this.validate()){
				var param = this.form;
				$.post('{:url("Commit/saveWebshopTable")}',param,function(res) {
					if(res.code == 1){
						main.$notify({title:"成功",type:"success",message:res.msg});
					}else{
						main.$notify.error({title:"错误",message:res.msg});
					}
				});
			}
		},
		validate() {
			if(this.form.link_man == ""){
				this.$notify.error({title:"错误",message:"填表人不能为空"});
				return false;
			}
			if(this.form.link_type== ""){
				this.$notify.error({title:"错误",message:"联系电话不能为空"});
				return false;
			}
			if(this.form.rpt_date == ""){
				this.$notify.error({title:"错误",message:"报表日期不能为空"});
				return false;
			}
			return true;
		},
	}
})
</script>
{/block}
